<template>
  <el-row>
    <el-col>
      <header class="head">协议转换</header>
      <el-form label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="入参协议：">
              {{ fbOptions.flow.selectNode.data.inAgreement }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="目标协议：">
              {{ fbOptions.flow.selectNode.data.targetAgreement }}
            </el-form-item>
          </el-col>
        </el-row>
        <header class="head" style="margin: 0">参数转换</header>
        <el-form-item label="参数序列化：" v-show="isJsonToSoap">
          <el-checkbox
            v-model="formData.isParamSerialize"
            :disabled="isView"
          ></el-checkbox>
        </el-form-item>
        <!-- 入参名称 -->
        <el-form-item label="参数名称：" v-show="isJsonToSoap">
          <el-input
            v-model="formData.paramInSerializeName"
            :disabled="isView"
            type="text"
            size="mini"
          ></el-input>
        </el-form-item>
        <!-- 出参名称 -->
        <el-form-item label="参数名称：" v-show="isSoapToJson">
          <el-input
            v-model="formData.paramOutSerializeName"
            :disabled="isView"
            type="text"
            size="mini"
          ></el-input>
        </el-form-item>
        <el-form-item label="参数带属性：" v-show="isSoapToJson">
          <el-checkbox
            v-model="formData.outparamWithAttr"
            :disabled="isView"
          ></el-checkbox>
        </el-form-item>
        <el-form-item label="WSDL路径：" v-show="isJsonToSoap">
          {{
            (fbOptions.flow.moreNodeInfo[formData.soapId] &&
              fbOptions.flow.moreNodeInfo[formData.soapId].apiUrl) ||
            ""
          }}
        </el-form-item>
        <el-form-item label="请求方法：">
          {{
            (fbOptions.flow.moreNodeInfo[formData.soapId] &&
              fbOptions.flow.moreNodeInfo[formData.soapId].httpRequestMethod) ||
            ""
          }}
        </el-form-item>
      </el-form>

      <header class="head" style="margin: 0">参数转换</header>
      <el-table
        :data="isJsonToSoap ? paramIn : paramOut"
        border
        max-height="300px"
      >
        <el-table-column
          prop="nodeName"
          label="原参数名"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="nodeLabel"
          label="参数描述"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="参数类型"
          prop="nodeType"
          :show-overflow-tooltip="true"
        >
          <template #default="scope">
            <span>{{ selectDictLabel(fbOptions.keyTypeList, scope.row.nodeType) }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="重命名" min-width="100">
          <template #default="scope">
            <el-input
              v-model="scope.row.serviceNodeName"
              size="mini"
            />
          </template>
        </el-table-column>
        <el-table-column label="是否隐藏" align="center" width="80">
          <template #default="scope">
            <el-checkbox
              v-model="scope.row.hidden"
            ></el-checkbox>
          </template>
        </el-table-column> -->
      </el-table>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "custom-transform",
  props: {
    fbOptions: {
      type: Object,
      default: () => {
      }
    },
  },
  computed: {
    formData: {
      get() {
        return this.fbOptions.flow.moreNodeInfo[this.fbOptions.flow.currentNodeId] || {};
      },
      set(val) {
        this.fbOptions.flow.moreNodeInfo = {
          ...this.fbOptions.flow.moreNodeInfo,
          [this.fbOptions.flow.currentNodeId]:val|| {},
        }
      },
    },
    isView() {
      return (
        this.fbOptions.operationType === "view"
      );
    },
    isJsonToSoap() {
      return (
        this.fbOptions.flow.selectNode.data &&
        this.fbOptions.flow.selectNode.data.type === "processor-JsonToSoapXml"
      );
    },
    isSoapToJson() {
      return (
        this.fbOptions.flow.selectNode.data &&
        this.fbOptions.flow.selectNode.data.type === "processor-SoapXmlToJson"
      );
    },
    paramIn() {
      return (
        (this.fbOptions.flow.moreNodeInfo[this.formData.soapId] &&
          this.fbOptions.flow.moreNodeInfo[this.formData.soapId].inParamList) ||
        []
      );
    },
    paramOut() {
      return (
        (this.fbOptions.flow.moreNodeInfo[this.formData.soapId] &&
          this.fbOptions.flow.moreNodeInfo[this.formData.soapId].outParamList) ||
        []
      );
    }
  },
};
</script>

<style lang="scss" scoped>
.head {
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: #333;
  font-weight: bold;
  font-size: 14px;
  background-color: #ccc;
  // margin-bottom: 16px;
}
.el-form-item {
  margin-bottom: 0px;
}
</style>
